<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
		 
		 Vue中有2种数据绑定的方式:
		 1.单向绑定(v-bind):数据只能从data流向页面。
		 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
		 备注:
		 1.双向绑定一般都应用在表单类元素上(如: input、 select等 )
		 2. v-model:value可以简写为v-model, 因为v-mode1默 认收集的就是value值。

		 -->
		<div id="root">
			<!-- 单向数据绑定 -->
			单向数据绑定：<input type="text" v-bind:value="msg1" />
			<!-- 双向数据绑定 -->
			双向数据绑定：<input type="text" v-model:value="msg2" />
		</div>

	</body>
	<script>
		new Vue({
			el: '#root',
			data(){
				return {
					msg1:'信息1',
					msg2:'信息2'
				}
			}
		})
	</script>
</html>
